<template>
	<view class="content">
		<view class="content-main" v-if="status == 0">
			<view class="content-block" style="margin: 0 auto;margin-top: 368rpx;">
				<view class="width-160 height-160" style="margin: 0 auto;">
					<image src="../../static/noStudy-img.png" mode="" style="width: 100%; height: 100%;"></image>
				</view>
				<view class="fontSize-28 color-999 marginTop-40 text-center">
					<!-- 您还未开启本小家的学习，快去学习吧！ -->
					{{msg}}
				</view>
			</view>

			<view class="btn">
				去学习
			</view>
		</view>
		<view class="content-container box-sizing" v-if="status == 1" :style="{
			  backgroundImage: `url('${bg_image}')`,
			  backgroundSize: '100% 100%',
			  overflow:'hidden',
			}">

			<view class="paddingBottom-24" :style="{
			  backgroundImage: `url('${whitebg_image}')`,
			  backgroundSize: '100% 100%',
			  height:'380rpx',
			  width:'686rpx',
			  margin:'0 auto',
			  marginTop:'170rpx',
			}">
				<view class="header">
					{{list.name}}
				</view>
				<view class="">
					<image :src="list.title1" mode="" class="marginTop-36 width-544 height-34 marginLeft-24"></image>
					<view class="borderRadius-30 width-638 height-182 flex space-between items-center"
						style="background-color: #f5f5f5;margin: 0 auto; margin-top: 30rpx;">
						<view class="" v-for="(item,index) in tj" :key="index" style="width: 20%;">
							<view class="" v-if="index != 2">
								<view class="fontSize-32 color-333 weight-700 text-center">
									<span v-html="item.num"></span>
								</view>
								<view class="fontSize-28 color-666 text-center">
									{{item.name}}
								</view>
							</view>
							<view class="" v-if="index == 2">
								<view @click="toStoryPage">
									<view class="fontSize-32 color-333 weight-700 text-center">
										<span v-html="item.num"></span>
									</view>
									<view class="fontSize-28 color-666 text-center">
										{{item.name}}
									</view>
								</view>
							</view>


						</view>


					</view>
				</view>


			</view>

			<view class="width-full height-820 colorBj-fff borderRadius-40 paddingLeft-32 paddingRight-32 box-sizing"
				style="margin: 16rpx auto;overflow: hidden;">
				<view class="flex space-between items-center marginTop-24">
					<image :src="list.title2" mode="" class="width-170 height-34"></image>
					<view class="color-51D580 fontSize-28" @click="toWordPage">
						详情 >
					</view>
				</view>
				<view class="marginTop-32 width-full">
					<view class="flex space-between items-center marginBottom-20 height-100"
						v-for="(item,index) in wordList" :key="index">
						<view class="">
							<view class="flex items-center">
								<view class="color-333 fontSize-36">
									<span v-html="item.wordHead"></span>

								</view>
								<image :src="item.is_biger" mode="" v-if="item.is_biger!=''"
									class="width-80 height-36 marginLeft-10">
								</image>
							</view>

							<view class="color-999 fontSize-26 marginTop-10">
								{{item.bh}}
							</view>
						</view>
						<view class="" style="width: 50%;">
							<view class="color-333 fontSize-28 text-right"
								style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
								<span v-html='item.tran'></span>
							</view>
							<view class="color-999 fontSize-26 marginTop-10 text-right">
								忘记{{item.unrem_count}}次
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<up-gap height="104"></up-gap>
		<view class="pos" @click="back">
			<view class="back_btn">
				返回单元
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';
	const status = ref(1)
	const studyreportApi = inject("studyreport");
	const page = ref(1);
	const big_sort = ref(1);
	const small_sort = ref(1);
	const msg = ref('');
	const list = ref({});
	const tj = ref([]);
	const wordList = ref([]);
	const bg_image = ref('');
	const whitebg_image = ref('');

	onLoad((op) => {
		page.value = op.page;
		big_sort.value = op.big_sort;
		small_sort.value = op.small_sort;
		studyreportApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value

		}).then(res => {

			if (res.status == 201) {
				msg.value = res.msg
				status.value = 0
			} else {
				list.value = res
				tj.value = res.tj
				wordList.value = res.wordList
				whitebg_image.value = res.whitebg_image
				bg_image.value = res.bg_image
			}
		})

	})
	const toWordPage = () => {
		uni.navigateTo({
			url: "/pagesA/reciteWords/wordReport?big_sort=" +
				big_sort.value +
				"&page=" +
				page.value +
				"&small_sort=" +
				small_sort.value
		});
	}
	const back = () => {
		uni.redirectTo({
			url: '/pages/index/memoryMethod2?page=' + page.value +'&region_num='+uni.getStorageSync('region_num')
		})
	}
	
	const toStoryPage = () => {
		console.log('点击')
		uni.navigateTo({
			url: "/pagesA/reciteWords/storyReport?big_sort=" +
				big_sort.value +
				"&page=" +
				page.value +
				"&small_sort=" +
				small_sort.value
		});
	}
</script>

<style scoped lang="scss">
	.content-main {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

	.content-container {
		padding: 0 32rpx;
		height: 100vh;
	}

	@media (min-height: 500px) and (max-height: 736px) and (orientation: portrait) {
		.content-container {
			height: 100%;
		}
	}

	.content-block {}

	.btn {
		width: 702rpx;
		height: 104rpx;
		background: #51D580;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		line-height: 104rpx;
		text-align: center;

	}

	.header {
		width: 312rpx;
		height: 62rpx;
		background: #FFC300;
		border-radius: 44rpx 0rpx 44rpx 0rpx;
		font-size: 26rpx;
		color: #fff;
		font-weight: 500;
		line-height: 62rpx;
		text-align: center;
	}

	.pos {
		width: 750rpx;
		height: 192rpx;
		background: #5DD6AF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
bottom: 0rpx;
		.back_btn {
			width: 702rpx;
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			text-align: center;
			line-height: 104rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #5BD5A8;
			margin: 20rpx auto;
		}
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>